---
slug: plugin #路径，不能重复
title: plugin # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

*  loader是用于特定的模块类型进行转换

*   plugin可以用于执行更加广泛的任务，比如打包优化，资源管理，环境变量注入等


### clean-webpack-plugin

> 前面演示的过程中，每次修改了一些配置，重新打包时，都需要删除dist文件夹，

**CleanWebpackPlugin**插件可以帮我们做到这事

```shell
npm install clean-webpack-plugin -D
```

#### 使用CleanWebpackPlugin

```js title="webpack.config.js"
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist/bundle"),//必须是一个绝对路径
    },
    module: {
       //loader.....
    },
    plugins: [
        new CleanWebpackPlugin(),
    ]
}
```


### html-webpack-plugin

> 在打包目录下会自动生成index.html

```shell
npm install html-webpack-plugin
```

#### 使用

```js title="webpack.config.js"\
const path = require("node:path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {
        //配置loader
    },
    plugins: [
        new HtmlWebPackPlugin({
            title:'hello world'//指定index.html的title
        })
    ]
}
```

#### 指定html模板
> 像vue/react这种框架都需要有一个根元素root，但是html-webpack-plugin不会生成root根元素

`<%= ID_NAME %>`是ejs语法 [ejs](../前端/ejs.mdx)

```html title="public/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="<%= ID_NAME %>"></div>
</body>
</html>
```


```js title="webpack.config.js"
const path = require("node:path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {
        //配置loader
    },
    plugins: [
        new HtmlWebPackPlugin({
            title: "hello world",
            template: path.resolve(__dirname, "./public/index.html"),
        })
    ]
}
```

**再执行`npm run build` 会报错，因为ejs语法定义的index.html需要ID_NAME常量**

### DefinePlugin

> 允许在编译时创建配置的全局常量，是一个webpack内置的插件

```js title="webpack.config.js"

const path = require("node:path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require('webpack');
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {

    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, "./public/index.html"),
        }),
        new DefinePlugin({
            ID_NAME: "'root'",
        })
    ]
}
```

**注意:**
> DefinePlugin內部定义的常量要引号套引号，因为内部源码处理流程

```js
const ID_NAME = root//如果不套引号的话，DefinePlugin会直接把内部值拿过来

```


### copy-webpack-plugin
> 把指定内容复制到打包目录下

```shell
npm install copy-webpack-plugin
```

> copy-webpack-plugin会自动复制到output.path目录下


```js title="webpack.config.js"
const path = require("node:path");

const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
    module: {
        //loader.....
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from:'public',//从哪个目录下复制
                    globOptions:{
                        ignore: ['**/*.html','.Ds_Store'],//忽略文件,.Ds_Store是mac的临时文件
                    }
                }
            ]
        })
    ]
}

```

